<!--网站头部-->
<template>
  <div class="webHeader">
    <div class="headerMain">
      <div class="main-left">
        <div class="loge">
          <img src="../../assets/Img/webloge.png" alt="" />
        </div>
        <div class="title">旭升网</div>
      </div>
      <div class="main-middle">
        <div class="middle-box">
          <div class="list-item" v-for="(item, index) in liList" :key="index">
            <router-link :to="item.link">{{ item.name }}</router-link>
          </div>
          <div class="searchMain">
            <div class="searchImage">
              <img src="../../assets/Img/Icon/search.png" alt="" @click="gotoSearchPage">
            </div>
            <div class="searchInputBox">
              <div class="searchInputMain">
                <input type="text" placeholder="请输入搜索内容" class="inputType" v-model="searchData">
              </div>
            </div>
          </div>
          <div class="list-item" v-if="judgeUserLogin">
            <router-link :to="{ name: 'personPage' }">个人中心 </router-link>
          </div>
          <div class="login-or-register centerLocation" v-else>
            <span class="login" @click="gotologin">登录</span>
            <span class="register" @click="gotoRegister">注册</span>
          </div>
        </div>
      </div>
      <div class="main-right centerLocation" v-if="judgeUserLogin">
        <div class="userImg" @click="showSelect()">
          <img v-if="hidddenDefaultImg" :src='publicUrl' alt="" />
          <img v-else src="../../assets/Img/defaultUserImg.png" alt="默认头像" />

          <div class="user-select" :class="{ showBox: show }">
            <div class="select-item">{{ userNickName }}</div>
            <div class="select-item" @click="backLogin()">退出登录</div>
          </div>


        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import { createPublicUrl } from '../../utils/index'
import { userLogout } from '../../service/systemService'
export default {
  name: "webHeader",
  //App中传入的一个相关的方法,用于帮助进行页面刷新
  inject: ['reload'],
  data() {
    return {
      liList: [
        { name: '首页', link: 'Home' },
        { name: '资源学习', link: 'videoSelect' },
        { name: '院校选择', link: 'schoolSelect' },
        { name: '题库学习', link: 'questionSelect' },
        { name: '帮助中心', link: 'helpCenter' },
      ],
      //动态显示选择框
      show: false,
      //用户头像
      userImg: sessionStorage.getItem('userImg'),
      //用户昵称
      userNickName: sessionStorage.getItem('nickname'),
      //搜索的文字 
      searchData: this.getSearchData
    }
  },
  methods: {
    //前往登录页面
    gotologin() {
      let location = { name: "loginView" };
      sessionStorage.removeItem('token')
      this.$router.push(location);
    },
    //前往注册页面
    gotoRegister() {
      let location = { name: "registerView" };
      sessionStorage.removeItem('token')
      this.$router.push(location);
    },
    //退出登录
    backLogin() {
      userLogout().then((res) => {
        if (res.data.code === 200) {
          this.$message.success('退出登录成功')
        }
        sessionStorage.removeItem('token')
        sessionStorage.removeItem('userImg')
        sessionStorage.removeItem('userId')
        sessionStorage.removeItem('teacherId')
        sessionStorage.removeItem('nickname')
        sessionStorage.removeItem('userPhone')
        let location = {
          name: 'loginView'
        }
        this.$router.push(location)
        this.reload()
      })

    },
    //前往个人中心
    gotoPerson() {
      let location = {
        name: 'personPage'
      }
      this.$router.push(location)
    },
    //前端搜索页面
    gotoSearchPage() {
      let location = { name: 'searchView' }
      location.params = { searchData: this.searchData }
      this.$router.push(location)
      this.searchData = ''
      this.GETSEARCHDATA(this.searchData)
    },
    //点击开启退出登录框
    showSelect() {
      this.show = !this.show
    },
    ...mapMutations('searchData', {
      GETSEARCHDATA: 'GETSEARCHDATA'
    })

  },
  computed: {
    //判断用户是否登录
    judgeUserLogin() {
      return sessionStorage.getItem('token') !== null
    },
    //拼接公共的url
    publicUrl() {
      return createPublicUrl() + this.userImg
    },
    //判断用户是否有头像
    hidddenDefaultImg() {
      return sessionStorage.getItem('userImg') !== '无'
    },
    //获取用户信息
    ...mapGetters('userInfo', {
      getUserInfo: 'getUserInfo'
    }),
  },

  watch: {
    'getUserInfo': {
      handler: function (newval) {
        //先从session中获取图片
        let localImg = sessionStorage.getItem(('userImg'))
        if (localImg !== newval.image) {
          this.userImg = newval.image
          this.userNickName = newval.nickname
          //将新图片存储到session,供首页使用
          sessionStorage.setItem('userImg', newval.image)
          //将新昵称存储到session,供首页使用
          sessionStorage.setItem('nickname', newval.nickname)
        }
        setTimeout(() => {
          this.reload()
        }, 100)
      },
    },
    deep: true,
    immediate: true,
  }
};
</script>

<style lang="less" scoped>
.webHeader {
  .main-left {
    display: flex;
    align-items: center;
    width: 138px;

    .loge {
      width: 40px;
      height: 40px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .title {
      padding: 0 5px;
      font-weight: 700;
      font-size: 20px;
    }
  }

  .main-middle {
    align-items: center;
    display: flex;
    width: 100%;
    justify-content: space-between;

    .middle-box {
      display: flex;

      .list-item {
        align-items: center;
        padding: 0 20px;
        cursor: pointer;
      }

      .searchMain {

        width: 220px;

        .searchImage {
          top: 20px;
          right: 11px;
        }

        .searchInputMain {
          position: relative;
        }
      }

      .login-or-register {
        margin-left: 50px;
        cursor: pointer;

        .login {
          margin-right: 2rem;
        }

        .register {
          background-color: #4d555d;
          color: #fff;
          height: 30px;
          line-height: 26px;
          padding: 2px;
          text-align: center;
          width: 60px;


        }
      }
    }

  }

  .main-right {

    .showBox {
      display: block !important;
    }

    .user-select {
      display: none;
      width: 100px;
      height: 0;
      position: absolute;
      top: 40px;
      left: -30px;
      transition: 1s;
      z-index: 999;

      .select-item {
        margin-top: 8px;
        width: 100%;
        text-align: center;
        color: black;
        height: 24px;
        line-height: 24px;
        cursor: pointer;
        overflow: hidden;
      }

      .select-item:hover {
        background-color: #9a9c9d;
      }
    }
  }

}
</style>
